<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'>{{title}}</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'></view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>

		<block v-else>
			<view class="fxied">
				<view class="time_info">
					<text>{{audioInfo.audio_text}}</text>
					<uv-count-down :time="(audioInfo.time / 60) * 60 * 1000" format="mm:ss"
						@finish="timeFinish"></uv-count-down>
				</view>
				<view class="fxied_content">
					<view class="tips_info">
						<view class="tips_left">
							<text class="tips_left_1">训练统计：</text>
							<image class="tips_left_2" :src='STATIC_URL+"94.png"' mode=""></image>
							<text>{{grasp_num}}词</text>
							<image class="tips_left_3" :src='STATIC_URL+"95.png"' mode=""></image>
							<text>{{not_num}}词</text>
						</view>
						<view class="tips_right">
							提醒：达不到英汉秒认不要打√，慎重！
						</view>
					</view>
					<view class="see_word" v-if="is_click">
						<view :class="!is_shadow ? 'see_word_left' : 'see_word_left_2'" @tap.stop="clickWord">
							<rich-text v-if="clickNum == 0" :nodes="activeWord"></rich-text>
							<rich-text class="select_word" v-if="clickNum == 1" :nodes="activeWord"></rich-text>
							<rich-text class="select_word" v-if="clickNum == 2" :nodes="activeWord"></rich-text>
							<rich-text style="opacity: 0;color: #fff;" v-if="clickNum == 3"
								:nodes="activeWord"></rich-text>
							<!-- <image v-if="clickNum == 1" class="see_img" :src='STATIC_URL+"40.png"' mode="aspectFill">
							</image> -->
							<text v-if="clickNum == 2" class="select_word_explain">{{decode}}</text>
						</view>
						<view class="see_word_right" v-if="!is_shadow">
							<block>
								<view class="see_right_item" @tap.stop="selectAnswer(1)">
									<image v-if="is_answer == 1" :src='STATIC_URL+"10.png"' mode=""></image>
									<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
									<text @tap.stop="selectAnswer(1)">会</text>
								</view>
								<view class="see_right_item" @tap.stop="selectAnswer(2)">
									<image v-if="is_answer == 2" :src='STATIC_URL+"37.png"' mode=""></image>
									<image v-else :src='STATIC_URL+"11.png"' mode=""></image>
									<text @tap.stop="selectAnswer(2)">不会</text>
								</view>
							</block>
					
						</view>
						<view class="unbind" v-if="is_shadow">
							<view class="unbind_1" @tap.stop="confirmUnbind">确认解绑</view>
							<view class="unbind_2">剩余{{word_unbind_num}}次解绑机会，是否解绑重新进行标识？</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 125rpx;" v-if="!is_click"></view>
			<view style="height: 200rpx;" v-if="is_click && !is_shadow"></view>
			<view style="height: 223rpx;" v-if="is_click && is_shadow"></view>
			<view class="word">
				<view class="word_item" v-for="(item, index) in paragraph_data" :key="index">
					<text v-for="(v, k) in item.word_info" :key="k">
						<text v-if="v.color==1"
							:class="(one_index == index && two_index == k) ? 'active_item_text': 'word_item_text'"
							@tap.stop="selectWord(v.word, index, k)">{{v.word}}</text>
							<template v-if="v.color==2 && v.is_mongolian_layer == 1">
								<text @tap.stop="selectMongolian(v.word, v.is_mongolian_layer, index, k)" class="word_ok text_hide">{{v.word}}</text>
							</template>
							<template v-if="v.color==2 && v.is_mongolian_layer != 1">
								<template v-if="one_index == index && two_index == k">
									<text @tap.stop="selectMongolian(v.word, v.is_mongolian_layer, index, k)"  class="word_ok active_item_text">{{v.word}}</text>
								</template>
								<template v-else>
									<text @tap.stop="selectMongolian(v.word, v.is_mongolian_layer, index, k)"  class="word_ok">{{v.word}}</text>
								</template>
								
							</template>
						
						<text @tap.stop="selectMongolian(v.word, v.is_mongolian_layer, index, k)" v-if="v.color==3"
							:class="v.is_mongolian_layer == 1 ? 'text_hide' : ''"
							class="word_yellow">{{v.word}}</text>
						<text v-if="v.color==4" class="word_err">{{v.word}}</text>
					</text>
			
				</view>
			</view>
			<view class="btn">
				<view class="btn_view" @tap.stop="submitWord">立即训练</view>
			</view>
		</block>

		<overlay ref="tips" :tips="tips"></overlay>


		<view style="height: 110rpx;"></view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import overlay from "@/components/overlay/overlay.vue"
	import {highlightedText} from "@/common/utils/utils.js"
	export default {
		components: {
			overlay
		},
		data() {
			return {
				"tips": "不会的单词个数只能是5的倍数", // 遮罩层显示的内容
				"aid": "", // 详情文章id
				"title": "",
				"isShow": true,
				"detailsInfo": {},
				"paragraph_data": [], // 单词列表
				"languageType": 1, // 英语类型  1美式 2英式
				"grasp_num": 0, // 会的单词数量
				"not_num": 0, // 不会的单词数量
				"is_click": false,
				"clickNum": 0, // 单词点击次数
				"one_index": -1,
				"two_index": -1,
				"activeWord": "",  // 选择的单词（处理过的）
				"innerAudioContext": null, // 音频播放器
				"is_answer": 0, // 1会   2不会
				"decode": "", // 单词翻译
				"wordlist_info": [], // 选择的列表
				"is_shadow": false, // 点击的是否是蒙层的
				"smallWord": "", // 选择的小写单词
				"word_unbind_num": 0, //单词剩余解绑次数

				"audioInfo": {
					"audio": {}
				}, // 页面标题音频
				"activeWordItem": "",  // 选择的单词（没处理过的）
				"audioSrc": "",  // 选择的单词音频路径
				"nextWord": {},
				"is_next": false,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				aid,
				title
			} = options
			if (aid !== undefined) this.aid = aid;
			if (title !== undefined) this.title = title;
			this.getDetails();
			this.getAudio();
		},
		onUnload() {

		},
		onReady() {
			this.innerAudioContext = uni.createInnerAudioContext();
		},
		onShow() {
			this.languageType = uni.getStorageSync('languageType');
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取录音配置  post65969da949442
			getAudio() {
				this.$api.post(global.apiUrls.post65969da949442, {

				}).then(res => {
					if (res.data.code == 1) {
						this.audioInfo = res.data.data[0];
						if (this.innerAudioContext) {
							this.innerAudioContext.destroy();
						}
						this.innerAudioContext = null;
						this.innerAudioContext = uni.createInnerAudioContext();
						this.innerAudioContext.autoplay = true;
						this.innerAudioContext.src = this.audioInfo.audio.path;

						this.innerAudioContext.onPlay(() => {
							console.log('开始播放');
						});
						this.innerAudioContext.onError((res) => {
							this.$message.info('播放失败，请重试');
						});
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},

			getDetails() {
				this.$api.post(global.apiUrls.post65572db24cbe5, {
					speechlist_id: this.aid
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.detailsInfo = res.data.data;
						this.paragraph_data = res.data.data.paragraph_data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 选择阴影单词
			selectMongolian(word, is_mongolian_layer, index, index1) {
				if (is_mongolian_layer == 0) return;
				this.activeWord = highlightedText(word, this.paragraph_data[index].word_info[index1].syllable);
				this.activeWordItem = word;
				this.nextWord = this.paragraph_data[index].word_info[index1];
				this.one_index = index;
				this.two_index = index1;
				this.smallWord = this.paragraph_data[index].word_info[index1].x_word;
				this.word_unbind_num = this.paragraph_data[index].word_info[index1].word_unbind_num;

				this.is_click = true;
				this.is_shadow = true;
			},
			// 确认解绑
			confirmUnbind() {
				this.$api.post(global.apiUrls.post658aa6ed292a0, {
					wordlist_id: this.paragraph_data[this.one_index].word_info[this.two_index].aid
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.paragraph_data.forEach((v, k) => {
							if (v.word_info.length > 0) {
								v.word_info.forEach((v1, k1) => {
									if (v1.x_word == this.smallWord) {
										v1.is_mongolian_layer = 0;
										v1.color = 1;
									}
								})
							}
						})
						if (this.paragraph_data[this.one_index].word_info[this.two_index].word_unbind_num > 0) {
							this.paragraph_data[this.one_index].word_info[this.two_index].word_unbind_num = this
								.paragraph_data[this.one_index].word_info[this.two_index].word_unbind_num - 1;
						}
						this.is_shadow = false;
						this.is_click = false;
						this.clickNum = 0;
						this.one_index = -1;
						this.two_index = -1;
						this.$forceUpdate();
					}
				})
			},
			// 选择的单词
			selectWord(word, index, index1) {
				this.is_shadow = false;
				this.is_answer = 0;
				this.clickNum = 0;
				if (this.not_num >= 45) {
					this.tips = "不会的单词个数最多不能超过45个";
					this.$refs.tips.open();
					return;
				}
				if (index == 0) {
					if (index1 == 0) {
						this.activeWord = highlightedText(word, this.paragraph_data[index].word_info[index1].syllable);
						this.activeWordItem = word;
						this.smallWord = this.paragraph_data[index].word_info[index1].x_word;
						this.one_index = index;
						this.two_index = index1;
						this.is_click = true;
						
						if (this.languageType == 1) {
							this.audioSrc = this.paragraph_data[this.one_index].word_info[this.two_index].american_accent;
						} else {
							this.audioSrc = this.paragraph_data[this.one_index].word_info[this.two_index].british_accent;
						}
						this.nextWord = this.paragraph_data[index].word_info[index1];
					} else {
						let list_index = false;
						for (var i = 0; i < index1; i++) {
							if (this.paragraph_data[index].word_info[i].color == 1) {
								list_index = true;
								break;
							}
						}
						if (!list_index) {
							this.activeWord = highlightedText(word, this.paragraph_data[index].word_info[index1].syllable);
							this.activeWordItem = word;
							this.smallWord = this.paragraph_data[index].word_info[index1].x_word;
							this.one_index = index;
							this.two_index = index1;
							this.is_click = true;
							if (this.languageType == 1) {
								this.audioSrc = this.paragraph_data[this.one_index].word_info[this.two_index].american_accent;
							} else {
								this.audioSrc = this.paragraph_data[this.one_index].word_info[this.two_index].british_accent;
							}
							this.nextWord = this.paragraph_data[index].word_info[index1];
						} else {

						}
						// if (this.paragraph_data[index].word_info[index1 - 1].color == 1) {

						// } else {
						// 	this.activeWord = word;
						// 	this.one_index = index;
						// 	this.two_index = index1;
						// 	this.is_click = true;
						// }
					}
				} else {
					let list_index = false;
					for (var i = 0; i < this.paragraph_data[index - 1].word_info.length; i++) {
						if (this.paragraph_data[index - 1].word_info[i].color == 1) {
							list_index = true;
							break;
						}
					}
					if (!list_index) {
						if (index1 == 0) {
							this.activeWord = highlightedText(word, this.paragraph_data[index].word_info[index1].syllable);
							this.activeWordItem = word;
							this.smallWord = this.paragraph_data[index].word_info[index1].x_word;
							this.one_index = index;
							this.two_index = index1;
							this.is_click = true;
							if (this.languageType == 1) {
								this.audioSrc = this.paragraph_data[this.one_index].word_info[this.two_index].american_accent;
							} else {
								this.audioSrc = this.paragraph_data[this.one_index].word_info[this.two_index].british_accent;
							}
							this.nextWord = this.paragraph_data[index].word_info[index1];
						} else {
							let list_index = false;
							for (var i = 0; i < index1; i++) {
								if (this.paragraph_data[index].word_info[i].color == 1) {
									list_index = true;
									break;
								}
							}
							if (!list_index) {
								this.activeWord = highlightedText(word, this.paragraph_data[index].word_info[index1].syllable);
								this.activeWordItem = word;
								this.smallWord = this.paragraph_data[index].word_info[index1].x_word;
								this.one_index = index;
								this.two_index = index1;
								this.is_click = true;
								if (this.languageType == 1) {
									this.audioSrc = this.paragraph_data[this.one_index].word_info[this.two_index].american_accent;
								} else {
									this.audioSrc = this.paragraph_data[this.one_index].word_info[this.two_index].british_accent;
								}
								this.nextWord = this.paragraph_data[index].word_info[index1];
							} else {

							}
						}
					} else {

					}
				}
				this.$forceUpdate();
			},
			
			// 单词点击次数
			clickWord() {
				if (this.is_shadow) return;
				this.clickNum += 1;
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
				}
				this.innerAudioContext = null;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = this.audioSrc;

				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					this.$message.info('播放失败，请重试');
					this.clickNum = this.clickNum - 1;
					this.$forceUpdate();
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				if (this.clickNum == 2) {
					this.decode = this.paragraph_data[this.one_index].word_info[this.two_index].c_word;
				}
				if (this.clickNum == 4) {
					this.clickNum = 1;
					return;



					if (this.is_answer == 1) {
						this.grasp_num += 1;
						this.paragraph_data.forEach((v, k) => {
							if (v.word_info.length > 0) {
								v.word_info.forEach((v1, k1) => {
									if (v1.x_word == this.smallWord) {
										v1.color = 2;
									}
								})
							}
						})

						this.wordlist_info.push({
							wordlist_id: this.paragraph_data[this.one_index].word_info[this.two_index].aid,
							is_meet: 1
						})
					} else {
						this.not_num += 1;
						// this.paragraph_data[this.one_index].word_info[this.two_index].color = 4;
						this.paragraph_data.forEach((v, k) => {
							if (v.word_info.length > 0) {
								v.word_info.forEach((v1, k1) => {
									if (v1.x_word == this.smallWord) {
										v1.color = 4;
									}
								})
							}
						})

						this.wordlist_info.push({
							wordlist_id: this.paragraph_data[this.one_index].word_info[this.two_index].aid,
							is_meet: 2
						})
					}
					this.is_answer = 0;
					this.clickNum = 0;
					this.is_click = false;
					this.decode = "";
				}
			},
			selectAnswer(type) {
				if (this.is_next) return;
				this.is_next = true;
				if (type == 1) {
					this.is_answer = type;
					this.grasp_num += 1;
					this.paragraph_data.forEach((v, k) => {
						if (v.word_info.length > 0) {
							v.word_info.forEach((v1, k1) => {
								if (v1.x_word == this.smallWord) {
									v1.color = 2;
								}
							})
						}
					})
					this.wordlist_info.push({
						wordlist_id: this.nextWord.aid,
						is_meet: 1
					})
					this.is_next = false;
				} else if (type == 2) {
					if (this.not_num >= 45) {
						this.tips = "不会的单词个数最多不能超过45个";
						this.$refs.tips.open();
						this.is_next = false;
						return;
					}
					this.is_answer = type;
					this.paragraph_data.forEach((v, k) => {
						if (v.word_info.length > 0) {
							v.word_info.forEach((v1, k1) => {
								if (v1.x_word == this.smallWord) {
									v1.color = 4;
								}
							})
						}
					})
					this.wordlist_info.push({
						wordlist_id: this.nextWord.aid,
						is_meet: 2
					})
					uni.showLoading();
					this.$api.post(global.apiUrls.post65d32a4abcbdf, {
						speechlist_id: this.aid,
						word: this.activeWordItem
					}).then(res => {
						console.log(res);
						uni.hideLoading();
						if (res.data.code == 1) {
							this.nextWord = res.data.data;
							if (res.data.data) {
								this.activeWord = highlightedText(res.data.data.word, res.data.data.syllable);
								this.activeWordItem = res.data.data.word;
								this.smallWord = res.data.data.x_word;
								this.not_num += 1;
								this.is_answer = 0;
								this.clickNum = 0;
								this.decode = res.data.data.c_word;
								if (this.languageType == 1) {
									this.audioSrc = res.data.data.american_accent;
								} else {
									this.audioSrc = res.data.data.british_accent;
								}
								this.nextBg(this.one_index, res.data.data.aid);
							} else {
								this.is_click = false;
							}
							this.is_next = false;
						} else {
							this.$message.info(res.data.msg);
							this.is_next = false;
						}
					}).catch(err => {
						this.is_next = false;
					})
				}
			},
			nextBg(one_index, word_id) {
				this.one_index = one_index;
				let nextIndex = -1;
				let aid = word_id;
				for(let i = 0; i < this.paragraph_data[this.one_index].word_info.length; i++) {
					if ((this.paragraph_data[this.one_index].word_info[i].aid == aid) && this.paragraph_data[this.one_index].word_info[i].color == 1) {
						nextIndex = i;
						this.two_index = i;
						break;
					}
				}
				if (nextIndex == -1) {
					if (this.one_index +1 <= this.paragraph_data.length) {
						this.nextBg(this.one_index+1, aid);
					}
				}
			},
			// 提交结果
			submitWord() {
				if (this.wordlist_info.length == 0) {
					this.tips = "请学习单词后提交";
					this.$refs.tips.open();
					return;
				}
				if (!this.isFive(this.not_num)) {
					this.tips = "不会的单词个数只能是5的倍数";
					this.$refs.tips.open();
					return;
				}
				this.$api.post(global.apiUrls.post6561655ca366c, {
					speechlist_id: this.aid,
					wordlist_info: JSON.stringify(this.wordlist_info)
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.$message.info(res.data.msg);
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					} else if (res.data.code == 2) {
						this.$message.info(res.data.msg);
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/index/englishSpeech/trainNow?record_id=' + res.data
									.data.record_id + '&is_train=1'
							})
						}, 800)
					} else if (res.data.code == 0) {
						this.$message.info(res.data.msg);
					}
				})
			},

			// 是否是5的倍数
			isFive(value) {
				if (value % 5 === 0) {
					return true;
				} else {
					return false;
				}
			},

			// 倒计时结束
			timeFinish() {
				uni.navigateBack();
			},
		}
	};
</script>
<style lang="scss" scoped>
	.time_info {
		width: 100%;
		height: 50rpx;
		background: #FA3B3D;
		font-size: 15rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		/deep/.uv-count-down__text {
			color: #fff !important;
			font-size: 15rpx !important;
		}
	}

	.btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 0 25rpx 35rpx;

		.btn_view {
			width: 100%;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			color: #fff;
			font-size: 25rpx;
			background: #4087FD;
			border-radius: 34px 34px 34px 34px;
		}
	}
	.fxied_content {
		background: #fff;
		border-radius: 10rpx;
		margin: 0 25rpx;
	}
	.tips_info {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 0 0;
		padding: 20rpx 12rpx;

		.tips_left {
			display: flex;
			align-items: center;
			font-size: 18rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;

			.tips_left_1 {
				margin-right: 5rpx;
			}

			.tips_left_2 {
				width: 20rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}

			.tips_left_3 {
				width: 20rpx;
				height: 20rpx;
				margin-left: 40rpx;
				margin-right: 10rpx;
			}
		}

		.tips_right {
			color: #FF672E;
			font-size: 15rpx;
		}
	}
	
	.fxied {
		// padding: 0 25rpx;
		position: fixed;
		left: 0;
		width: 100%;
		background: #f8f8f8;
		z-index: 10;
		
	}
	.see_word {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 12rpx;
		border-top: 1px solid #eee;
		// margin: 10rpx 0 0;
	
		.see_word_left {
			width: 70%;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			// font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;
		}
	
		.see_word_left_2 {
			width: 70%;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;
		}
	
		.select_word_explain {
			width: 50%;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			// color: #999;
			color: #333;
			margin-left: 90rpx;
		}
	
		.select_word {
			white-space: nowrap;
			// width: 50%;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			// color: #4087FD;
		}
	
		.see_img {
			width: 25rpx;
			height: 25rpx;
			margin-left: 13rpx;
		}
	
		.see_word_right {
			display: flex;
			flex-wrap: wrap;
			justify-self: self-end;
	
			.see_right_item {
				display: flex;
				align-items: center;
				font-size: 18rpx;
				color: #333;
				margin-left: 40rpx;
	
				image {
					width: 23rpx;
					height: 23rpx;
					margin-right: 10rpx;
				}
			}
		}
	
		.unbind {
			width: 50%;
	
			.unbind_1 {
				width: 101rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				background: #F0F6FF;
				border-radius: 5rpx;
				color: #4087FD;
				font-size: 15rpx;
				margin: 0 0 0 auto;
			}
	
			.unbind_2 {
				text-align: right;
				font-size: 13rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}
	.word {
		margin: 15rpx 25rpx 0;
		background: #fff;
		border-radius: 10rpx;
		padding: 13rpx 20rpx;
		.word_item {
			padding: 13rpx 0;
			line-height: 30rpx;
			overflow: hidden;
			word-break: keep-all;

			.word_item_text {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
			}

			.active_item_text {
				background: #E0ECFF;
				float: left;
				padding: 5rpx 10rpx;
				border-radius: 5rpx;
				font-size: 25rpx;
			}

			.word_learned {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				color: #4DC777;
				opacity: 0.2;
			}

			.word_ok {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				color: #4DC777;
			}

			.word_err {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				color: #FA3B3D;
				opacity: 1;
			}

			.word_yellow {
				float: left;
				padding: 5rpx 10rpx;
				font-size: 25rpx;
				color: #FFA200;
			}

			.text_hide {
				opacity: 0.2;
			}
		}
	}

	.intensify {
		margin: 15rpx 25rpx 0;
		background: #fff;
		border-radius: 10rpx;

		.intensify_item {
			padding: 20rpx;

			// border-bottom: 1px solid #eee;
			.item_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;

				.date_text {
					font-size: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.item_content {
				display: flex;
				align-items: center;

				.item_num {
					width: 55rpx;
					height: 55rpx;
					background: #f8f8f8;
					border-radius: 50%;
					position: relative;

					.item_num_img {
						width: 28rpx;
						height: 28rpx;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}

					.item_num_text {
						font-size: 13rpx;
						font-weight: bold;
						line-height: 52rpx;
						text-align: center;
						color: #fff;
						position: relative;
						z-index: 10;
					}
				}

				.item_text {
					.item_content_1 {
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.item_content_2 {
						font-size: 18rpx;
						color: #333333;
					}
				}

			}
		}
	}

	.tabs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 135rpx;

		.tabs_item {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 20rpx 0;
			position: relative;
		}

		.active_item {
			color: #4087FD;
			font-weight: bold;
		}

		.tabs_line {
			display: inline-block;
			width: 31rpx;
			height: 5rpx;
			background: #4087FD;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}

	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.platformMessage_flex_1 {
		// margin: 16rpx 25rpx 16rpx 25rpx;
		// background: #fff;
		// border-radius: 10rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>